<template>
  <div>
    <!--  <div class="float-r" @click="add">
      <iconpark-icon name="add"></iconpark-icon>
    </div> -->
    <a-modal
      v-model:visible="modelVisible"
      title="菜单与菜单组"
      ok-text="确认"
      cancel-text="取消"
      @ok="modelConfirm"
    >
      <a-input placeholder="菜单标题" v-model:value="updateData.menuTitle">
        <template #prefix>
          <iconpark-icon name="title"></iconpark-icon>
        </template>
        <template #suffix>
          <a-tooltip title="菜单标题">
            <iconpark-icon name="sigh"></iconpark-icon>
          </a-tooltip>
        </template>
      </a-input>
      <a-input placeholder="图标名称" v-model:value="updateData.icon" class="mt-1">
        <template #prefix>
          <iconpark-icon :name="updateData.icon"></iconpark-icon>
        </template>
      </a-input>
      <div class="flex mt-1">
        <div class="mr-2">
          是否为内嵌菜单
          <a-switch v-model:checked="updateData.isSubMenu" />
        </div>
        <div>
          是否有菜单组
          <a-switch v-model:checked="updateData.hasMenuItemGroup" />
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, ref } from "vue";
import { message } from "ant-design-vue";

export default defineComponent({
  setup(props) {
    const { proxy } = getCurrentInstance();
    const modelVisible = ref(false);
    const updateData = ref({
      menuTitle: "",
      icon: "",
      isSubMenu: false,
      hasMenuItemGroup: false,
    });
    const isAdd = ref(false);
    function onDelete(id) {
      proxy.$api.get("menuitem/delete?id=" + id).then((res) => {
        if (res.error === 0) {
          modelVisible.value = false;
          message.success(res.message);
          setTimeout(() => {
            location.reload();
          }, 1000);
        } else message.error(res.message);
      });
    }
    function onupdate(object) {
      updateData.value = object;
      modelVisible.value = true;
      isAdd.value = false;
    }
    const modelConfirm = () => {
      if (isAdd.value) {
        proxy.$api.post("menuitem/add", updateData.value).then((res) => {
          if (res.error === 0) {
            modelVisible.value = false;
            message.success(res.message);
          } else message.error(res.message);
        });
      } else {
        proxy.$api.post("menuitem/update", updateData.value).then((res) => {
          if (res.error === 0) {
            modelVisible.value = false;
            message.success(res.message);
            proxy.$emit("upSuccess");
          } else message.error(res.message);
        });
      }
    };
    const add = () => {
      modelVisible.value = true;
      isAdd.value = true;
      updateData.value = {
        menuTitle: "",
        icon: "",
        isSubMenu: false,
        hasMenuItemGroup: false,
      };
    };
    return {
      modelVisible,
      updateData,
      onDelete,
      onupdate,
      modelConfirm,
      add,
    };
  },
});
</script>

<style scoped></style>
